<template>
    <div class="electronicBusiness">
        <div class="banner">
            <img src="@/assets/image/applet/bg.png" alt="">

            <div class="applet-descript">
                <div class="applet-content">
                    <div class="applet-content-title">微信小程序开发</div>
                    <div class="descript">
                        小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了小程序的开发，与我们一起共同发力推动小程序的发展
                    </div>

                    <div class="advantage">
                        <div class="advantage-item">
                            <div class="img-box">
                                <img src="@/assets/image/electronicBusiness/1.png" alt="">
                            </div>
                            <div class="desc">B2B</div>
                        </div>

                        <div class="advantage-item">
                            <div class="img-box">
                                <img src="@/assets/image/electronicBusiness/2.png" alt="">
                            </div>
                            <div class="desc">B2C</div>
                        </div>

                        <div class="advantage-item">
                            <div class="img-box">
                                <img src="@/assets/image/electronicBusiness/3.png" alt="">
                            </div>
                            <div class="desc">C2C</div>
                        </div>

                        <div class="advantage-item">
                            <div class="img-box">
                                <img src="@/assets/image/electronicBusiness/4.png" alt="">
                            </div>
                            <div class="desc">O2O</div>
                        </div>

                        <div class="advantage-item">
                            <div class="img-box">
                                <img src="@/assets/image/electronicBusiness/5.png" alt="">
                            </div>
                            <div class="desc">服务交易平台</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="problem bx">
            <div class="electronicBusiness-title">
                <div class="title">传统企业转型电商面临四大难关</div>
                <div class="line"></div>
            </div>

            <div class="problem-list">
                <div v-for="item in 4" class="problem-item">
                    <div class="img-box">
                        <img src="@/assets/image/electronicBusiness/6.png" alt="">
                    </div>
                    <div class="circle">
                        <div class="line">
                            <div class="sqare"></div>
                        </div>
                    </div>
                    <div class="title">落地难</div>
                    <div class="desc">上了不少课，还是难以落地！
                        <br />老板不懂网络实操，如何快速启动？
                    </div>
                </div>
            </div>
        </div>

        <div class="solve">
            <img src="@/assets/image/electronicBusiness/bg.png" alt="">

            <div class="content">
                <div class="electronicBusiness-title">
                    <div class="title">打造专业购物商城平台解决方案</div>
                    <div class="line"></div>
                </div>
                <div class="desc bx">
                    <div>
                        专业用最专业的技术，用最专业的技术，软件采用基于LAMP扩充至N层的架构，充分利用了其高效的技术平台。高效资深开发人员，拥有丰富开发经验七年电商开发经验工程师参与行业高端商城案例管理经验。稳定追求卓越，提高效率，保障运行我们在软件开发程序上遵循国际开发规范，从技术细节到服务器部署流程严格监督。服务资深开发人员，拥有丰富开发经验具备一系列编码、文档、技术规范，新的技术人员接受维护也零衔接。
                    </div>
                </div>
            </div>

            <div class="solve-list">
                <img src="@/assets/image/electronicBusiness/10.png" alt="">
            </div>
        </div>

        <div class="feature">
            <div class="electronicBusiness-title">
                <div class="title">电商平台网站功能特色</div>
                <div class="line"></div>
            </div>

            <div class="feature-list bx">
                <div v-for="item in 10" class="feature-item">
                    <div class="img-box">
                        <img src="@/assets/image/electronicBusiness/11.png" alt="">
                    </div>
                    <div class="feature-main">
                        <div class="title">强大商品属性</div>
                        <div class="desc">遵循搜索引擎技术标准</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="cooperation">
            <div class="bx">
                <div class="electronicBusiness-title">
                    <div class="title">合作流程</div>
                    <div class="line"></div>
                </div>

                <img src="@/assets/image/applet/manufacture.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.electronicBusiness {
    .banner {
        position: relative;

        img {
            width: 100%;
        }

        .applet-descript {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1000;
            height: 100%;
            box-sizing: border-box;
            padding-left: 8vw;

            .applet-content {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .applet-content-title {
                    font-size: 2vw;
                    color: white;
                }

                .descript {
                    font-size: 1vw;
                    color: white;
                    margin: 2vw 0;
                    width: 50%;
                }

                .advantage {
                    display: flex;

                    .advantage-item {
                        margin-left: 1vw;
                        text-align: center;
                        font-size: .8vw;
                        color: white;

                        .img-box {
                            border: 1px solid #80B4AF;
                            padding: .3vw;
                            margin-bottom: .3vw;

                            img {
                                width: 2.5vw;
                                height: 2.5vw;
                            }
                        }
                    }
                }
            }
        }
    }

    .problem {
        padding: 20px 0px;

        .problem-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;

            .problem-item {
                // display: flex;
                // justify-content: center;
                width: 25%;
                // background: pink;

                .img-box {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 80%;
                    }
                }

                .circle {

                    .line {
                        position: relative;
                        border-top: 1px solid #ccc;
                        margin: 20px 0px;

                        .sqare {
                            position: absolute;
                            left: 50%;
                            top: -7.5px;
                            width: 15px;
                            height: 15px;
                            border-radius: 50%;
                            border: 1px solid #ccc;
                            transform: translateX(-50%);

                            &::before {
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                content: '';
                                width: 8px;
                                height: 8px;
                                background: #2488c2;
                                transform: translate(-50%, -50%);
                                border-radius: 50%;
                            }
                        }
                    }

                }

                .title,
                .desc {
                    text-align: center;
                }

                .title {
                    margin: 15px 0px;
                    font-size: 18px;
                    font-weight: 100;
                }

                .desc {
                    color: #666666;
                    font-size: 12px;
                }

            }
        }
    }

    .solve {
        position: relative;

        img {
            width: 100%;
        }

        .content {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            padding: 40px 0;

            .electronicBusiness-title {

                .title {
                    color: white;
                }

                .line {
                    background: white;
                }
            }

            .desc {
                color: #E4E4E4;

                &>div {
                    width: 60%;
                }
            }
        }

        .solve-list {
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 50%;
            transform: translate(-50%, 50%);
        }
    }

    .feature {
        padding: 5vw 0 50px 0;

        .feature-list {
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;

            .feature-item {
                display: flex;
                width: calc(20% - 10px);
                align-items: center;
                border: 1px solid #E5E5E5;
                box-sizing: border-box;
                margin-right: calc(50px / 5);
                padding: 10px 20px;
                margin-bottom: 20px;
                cursor: pointer;

                &:nth-child(5n) {
                    margin-right: 0;
                }

                .img-box {
                    img {
                        width: 35px;
                        height: 35px;
                    }
                }

                .feature-main {
                    box-sizing: border-box;
                    padding-left: 10px;
                    font-size: 14px;

                    .title {}

                    .desc {
                        font-size: 12px;
                        color: #666666;
                    }
                }
            }
        }
    }

    .cooperation {
        padding: 20px 0px;
        background: #F5F5F5;

        img {
            width: 100%;
            margin-top: 20px;
        }
    }

    .electronicBusiness-title {
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-size: 1.2vw;
            color: #202020;
        }

        .line {
            width: 2vw;
            height: 2px;
            background: black;
            margin-top: .5vw;
        }
    }
}
</style>